<template>
  <div class="jq">
    <div class="jq-info">
      <div class="jq-info-item">{{ match.home_name }}[罚牌]</div>
      <div class="jq-info-item">{{ match.away_name }}[罚牌]</div>
    </div>
    <div class="jq-result">
      <MatchResult :match="match" :odds="odds" />
    </div>
  </div>
</template>
<script setup>
import MatchResult from '../MatchResult.vue'

const props = defineProps({
  match: Array,
  odds: Array,
})
</script>
<style lang="scss" scoped>
.jq {
  display: flex;
}

.jq-info {
  width: 204px;
  padding-top: 24px;
  padding-right: 12px;
  padding-bottom: 12px;

  .jq-info-item {
    margin-bottom: 12px;
    &:nth-child(1) {
      font-size: 16px;
    }
  }
}

.jq-result {
  flex: 1;
}
</style>
